<template>
    <div class="shou">
        <ChaView2>
            <h4>电影</h4>
        </ChaView2>
        <div class="tou">
            <p>影片</p>
        </div><br><br><br><br>
        <div class="pg">
            <div class="gp" v-for="(item,index) in list" :key="index">
            <router-link class="a" :to="{path:'/xing',query:{id:item.MovieID,name:item.Name,img:imgUrl+item.ImgUrl,Intro:item.Intro,Rate:item.Rate,Actors:item.Actors,Type:item.Type,ReleaseTime:item.ReleaseTime}}">
                <img :src="imgUrl+item.ImgUrl" alt="">
                    </router-link>
                <div class="rigth">
                    <p class="p1">{{item.Name}}</p>
                    <p><button class="but">2D</button><button>IMAX</button><span>{{item.Rate}}分</span></p>
                    <div class="min">
                        {{item.Actors}}
                        
                        <p>{{item.Type}}</p>
                    </div><br><br>
                    <router-link :to="{path:'/chang',query:{id:item.MovieID,name:item.Name,Rate:item.Rate,price:item.Price}}">
                        <button id="mp">购票</button>
                    </router-link>
                </div>
                
            </div>
        </div>
        <DiCha></DiCha>
    <router-view/>
    </div>
</template>

<script>
import ChaView2 from '../components/ChaView2.vue'
import DiCha from '../components/DiCha.vue'
export default {
    components: {
        ChaView2,
        DiCha
    },
    data() {
        return {
            list:[],
        };
    },
    mounted () {
        this.axios.get('/Movie/New').then(res => {
            console.log(res);
            this.list = res.data.Movie
        })
    },
    methods: {
        
    },
};
</script>

<style lang="scss" scoped>
.a{
    display: inline-block;
   
}
.min{
     width: 160px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}
#mp{
    width: 60px;
    height: 30px;
    background-color: #076FA2;
    color: white;
    border: none;
    border-radius: 5px;
    margin-left: 75%;
}
.pg{
    height: 135rem;
.gp{
    display: flex;
   height: 20vh;
   border-bottom: 1px solid  #E5E5E5;
   img{
    width: 28vw;
    margin-top: 1%;
    flex: 3;
    text-align: right;
    height: 90%;
   }
   .rigth{
    flex: 7;
    height: 100%;
    text-indent: 5px;
    font-size: 16px;
    .but{
        background-color: #076FA2;
        color: #F3F3F3;
        width: 30px;
        margin-left: 5px;
        font-size: 12px;
    }
    button{
        font-size: 12px;
        width: 40px;
        background-color: white;
        border: none;
        border: 1px solid #076FA2;
        color: #076FA2;
    }
    span{
        display: inline-block;
        color: #FF9A00;
        margin-left: 50%;
        font-weight: 600;
    }
    .p1{
        font-weight: 600;
        line-height: 30px;
    }
   }
}
}

.shou{
    width: 100vw;
    height: 100vh;
    background-color: #F3F3F3;
}
.tou{
    position: fixed;
    top: 5%;
    color: #076FA2;
    height: 4vh;
    width: 100%;
    background-color: white;
    text-align: center;
    font-weight: 600;
    line-height: 4vh;
}
</style>
